<template>
  <div class="searchForm" @keypress="keypress">
    <div class="labelBox">
      <div class="label" v-if="keys.includes('sname')">
        <span class="name">系统名称：</span>
        <el-input v-model="form.name" placeholder="请输入标题" size="small"></el-input>
      </div>
      <div class="label"  v-if="keys.includes('aname')">
        <span class="name">API名称：</span>
        <el-input v-model="form.name" placeholder="请输入标题" size="small"></el-input>
      </div>
      <div class="btn-box">
        <el-button type="primary" icon="el-icon-search" size="small" @click="$emit('on-search')">查询</el-button>
        <el-button type="info" icon="el-icon-refresh" size="small" plain @click="onRefeash">重置</el-button>
      </div>
    </div>

    <slot></slot>
  </div>
</template>

<script>
let defaultForm ={
  name: '',
}
export default {
  name: "searchForm",
  props:{
    keys:{
      default:()=>[]
    }
  },
  methods: {
    keypress(e) {
      if(e.keyCode == 13){
        this.$emit('on-search')
      }
    },
    onRefeash(){
      this.form = {...defaultForm}
      this.$emit('on-search')
    },
  },
  data() {
    return {
      form: {
        ...defaultForm
      },
    }
  },
}
</script>

<style scoped lang="less">
.searchForm {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  flex-wrap: wrap;

  .labelBox {
    display: flex;
  }

  .label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    margin-right: 10px;
    .name {
      width: 80px;
      text-align: left;
      font-size: 12px;
      color: #666666;
    }
  }

  .btn-box {
    margin-left: 10px;
    margin-bottom: 10px;
  }
}
</style>
